<!--立即购买页-->
<template>
  <div class="payment" :class="displayOrHide ? 'eventDisable' : ''">
    <!--头部-->
    <section class="orderAmount">
      <div>订单金额</div>
      <div>￥
        <span>{{amountTotal}}</span>
      </div>
    </section>

    <!--选择支付方式-->
    <section class="paymentMethods">
      <div class="paymentMethodsTitle">选择支付方式</div>
      <!--微信支付-->
      <div class="weChat" @click="weChatPaymentAmount">
        <img src="../../assets/image/beautySalon/payment (3).png" />
        <label for="weChat">微信支付</label>
        <input type="radio" id="weChat" v-model="payType" value="3" name="payment" class="hidden-input" />
        <span :class=" isWeChatpayment ? 'isWeChatpayment' : 'addBorder' "></span>
      </div>
      <!--分割线-->
      <div class="partingline">
        <div></div>
      </div>
      <!--会员卡支付   // 判断支付方式  typechar(1) NULL订单类型 0.到店服务订单 1.上门服务订单 2.会员卡开卡 3:直接收钱 4:会员卡充值5:疗程卡-->
      <div>
        <div class="member" @click.prevent="cardDiscountm(false)">
          <img src="../../assets/image/beautySalon/payment2 (3).png" />
          <label for="member">
                            <div>会员卡支付
                                <div class="recommend">推荐</div>
                            </div>
                            <div>享永久购物折扣</div>
                        </label>

          <input type="radio" id="member" v-model="payType" value="2" name="payment" class="hidden-input" />
          <span :class="isMemberPayment ? 'isMemberPayment' : 'addBorder'"></span>
        </div>
        <div class="memberCardType" @click="openMemberCardDialog">
          <div>{{defaultCard.cardName}}</div>
          <div>
            <span v-if="!isCourseCard">{{deductionMoney}}{{selectMemberCard.length===0?'':'折'}}</span>
            <span v-if="isCourseCard">{{courseDeduction}}折</span>
            <i class="arrow"></i>
          </div>
        </div>
      </div>
      <!-- 一卡通支付 -->
      <!-- <div class="oneCard">
        <div>
          <label @click="selectOneCard(false)" for="oneCard">
                <span> <i></i>  一卡通支付 <i></i></span>
                <span>
                   <input type="radio" id="oneCard" v-model="payType" value="6" name="payment"  />
                </span>
                </label>
        </div>
        <div @click="showOneCard=true">
          <span>{{currentOneCard.cardName}}</span>
          <span>面子专属 {{currentOneCard.discount}}折<i  class="arrow"></i></span>
        </div>
      </div> -->
    </section>
    <!-- <span>{{item.cardName}} - 面子专属}折</span>
                       <span>余额：{{(item.balance-0).toFixed(2)}}</span> -->
    <!--底部-->
    <footer :class="{footerIponeX:$store.state.mutations.isIponeX}">
      <div class="paymentContent disFlex">
        <span class="paymentTitle">待支付:</span>
        <span class="paymentSymbol">￥</span>
        <span class="paymentMoney">{{discountMoney == 0 ? "0.0" : discountMoney}}</span>
        <span class="paymentPreferential">
                            已优惠:
                            <span>￥</span> {{amountReduce || '0'}}
        </span>
      </div>
      <div class="confirmPayment" @click="confirmPayment">确认支付</div>
    </footer>
    <div :class="{IponeX:$store.state.mutations.isIponeX}" v-if="$store.state.mutations.isIponeX"></div>
    <div class="oneCardMsk" v-if="showOneCard">
      <div class="oneCardList">
        <div> <span>请选择一卡通</span> <span @click="showOneCard=false"></span> </div>
        <ul>
          <li class="OneCardItem" v-for="(item,index) in oneCardList" :key="index">
            <label for="oneCardItem" @click="selectOneCard(item)">
                   <div>
                     <span>
                           <img :src="item.imgUrl" alt="">
                     </span>
                     <div>
                       <span>{{item.cardName}} - 面子专属{{item.discount}}折</span>
                       <span>余额：{{(item.balance-0).toFixed(2)}}</span>
                     </div>
                   </div>
                   <div>
                     <input type="radio" id="oneCardItem" name='oneCard'>
                   </div>
                  </label>
          </li>
        </ul>
      </div>
    </div>
    <!--弹出框-选择会员卡-->
    <div class="paymentMethods layer" :class="displayOrHide ? 'eventAble' : 'hide'">
      <div class="dialog">
        <h4>选择会员卡
          <i @click="closeSelectCard"></i>
        </h4>
        <div class="weChat card" v-for="(item,index) in selectMemberCard" :key="index">
          <!-- cardBlue  cardPink cardYellow -->
          <img v-lazyload="{shopImg:item.cardType.imageTwo,imgType:'member'}" />
          <label :for="'selectCard' + index" @click="selectCard(item,$event)">
                                <div class="surplus">
                                    <div>{{item.cardName}}</div>
                                    <div>
                                        <span>余额：
                                            <i>￥</i> {{item.normal?item.availableMoney:0}}
                                        </span>
                                    </div>
                                </div>
                            </label>
          <input type="radio" :id="'selectCard' + index" name="paymentCard" class="hidden-input" />
          <span class="addBorder"></span>
        </div>
      </div>
    </div>

    <!--待用户输入支付密码弹出框-->
    <Dialog v-if="false" :msg="dialogTxt.msg" :btn="dialogTxt.btn" :okBtn="dialogTxt.okBtn" :cancelBtn="dialogTxt.cancelBtn"
      @sure="sures" @cancel="cancels">
      <div slot="dialogHtml" class="payPassWord">
        <h5>{{pwdMsgTit}}</h5>
        <p v-if="setPwdMsg" class="setPwdMsg">{{setPwdMsg}}</p>
        <div class="showPwd">
          <input class="newinput" type='password' readonlyunselectable="on" name='payPwd' @keyup="foo" @keyup.enter="sures" v-model="payPwd"
            placeholder="" />
          <div class="SPAN">
            <span> </span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </div>
          <div class="I">
            <i v-for="(item,index) in pwdList" :key="index"></i>
          </div>
        </div>
        <div class="msg" v-if="pwdMsg">
          <span>{{pwdMsg}}</span>
          <span>{{setPwdMsg?"":"忘记密码？"}}</span>
        </div>
        <input style="display: none" />

        <!--阻止表单按回车提交-->
      </div>
    </Dialog>
    <!-- 1.0.8  改版后的会员卡支付密码弹出窗 -->
    <div v-if="dialog" class="newdialog">
      <div class="mask"></div>
      <div class="content">
        <div class="_content">
          <h5>{{pwdMsgTit}}</h5>
          <p class="setPwdMsg">{{setPwdMsg}}</p>
          <div class="showPwd">
            <input class="newinput" readonlyunselectable="on" type='password' name='payPwd' @keyup="foo" v-model="payPwd" placeholder=""
            />
            <div class="SPAN">
              <span> </span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
            <div class="I">
              <i v-for="(item,index) in pwdList" :key="index"></i>
            </div>
          </div>
          <div class="msg">
            <div>
              <span>{{pwdMsg}}</span>
              <span>
                  <router-link :to="{path:'/findPayPwd',query:{redirect:this.$router.currentRoute.fullPath}}">  {{setPwdMsg?"":"忘记密码？"}}</router-link>
                </span>
            </div>
          </div>
        </div>
        <div class="btn">
          <span @click="cancel">取消</span>
          <span @click="setPwd($event)" v-if="setPwdMsg">{{setPwdMsg?"下一步":""}}</span>
          <span v-if="!setPwdMsg" @click="sures">确认</span>
        </div>
      </div>

    </div>
    <!--会员卡余额不足弹出框-->
    <Dialog v-if="dialogM" :msg="dialogTxtM.msg" :btn="dialogTxtM.btn" :okBtn="dialogTxtM.okBtn" :cancelBtn="dialogTxtM.cancelBtn"
      :closeBtn="dialogTxtM.closeBtn" @sure="suresM" @cancel="cancelsM" @close="closeM">

      <div slot="dialogHtmlM" class="payPassWord">
      </div>
    </Dialog>

    <!--无会员卡弹出框-->
    <Dialog v-if="dialogW" :msg="dialogTxtW.msg" :btn="dialogTxtW.btn" :okBtn="dialogTxtW.okBtn" :cancelBtn="dialogTxtW.cancelBtn"
      :closeBtn="dialogTxtW.closeBtn" @sure="suresW" @cancel="cancelsW" @close="closeW">
      <div slot="dialogHtmlW" class="payPassWord">
      </div>
    </Dialog>

    <!--未设置支付密码-->
    <Dialog v-if="dialogT" :msg="dialogTxtT.msg" :btn="dialogTxtT.btn" :okBtn="dialogTxtT.okBtn" :cancelBtn="dialogTxtT.cancelBtn"
      @sure="suresT" @cancel="cancels">


    </Dialog>
  </div>
</template>
<script>
  export default {
    data: function() {
      return {
        // 是否会员卡支付
        isMemberPayment: false,
        // 是否微信支付
        isWeChatpayment: false,
        // 会员卡折后价
        discountMoney: '',
        //订单id
        id: '',
        // 默认显示的会员卡name
        defaultCard: '您还没有会员卡',
        // 默认显示的会员卡的折扣
        deductionMoney: '',
        // 疗程卡折扣
        courseDeduction: '',
        // 卡的余额
        availableMoney: '',
        // 选中的卡id
        cardId: '',
        // 选中的卡 对象数据
        cardItem: '',
        // 是否显示弹窗
        displayOrHide: false,
        //选择会员卡数据
        selectMemberCard: [],
        // 订单编号
        orderNo: '',
        // 订单金额
        amountTotal: '',
        // 优惠额度
        amountReduce: '',
        // 支付类型
        payType: '',
        // 支付密码
        payPwd: '',
        // 微信数据
        weChatData: {},
        // 会员卡选择弹框
        dialog: false,
        // 会员支付密码弹框
        dialogTxt: {
          btn: '',
          okBtn: '',
          cancelBtn: '',
          msg: ''
        },
        // 未设置密码弹出框
        dialogT: false,
        dialogTxtT: {
          btn: '',
          okBtn: '去设置',
          cancelBtn: '取消',
          msg: '未设置支付密码，请先去账户与安全中去设置！'
        },
        // 余额不足弹出框
        dialogM: false,
        dialogTxtM: {
          btn: '',
          okBtn: '选择其他卡片',
          cancelBtn: '去充值',
          closeBtn: true, //显示关闭按钮
          msg: ''
        },
        // 无会员卡弹出框
        dialogW: false,
        dialogTxtW: {
          btn: '',
          okBtn: '查看门店',
          cancelBtn: '取消',
          closeBtn: false, //显示关闭按钮
          msg:
            '<b>您还没用会员卡</b><br/>去门店办理面子会员卡，购买服务享受永久折扣。'
        },
        // 判断支付方式  typechar(1) NULL订单类型 0.到店服务订单 1.上门服务订单 2.会员卡开卡 3:直接收钱 4:会员卡充值5:疗程卡
        orderType: '',
        cardTypeId: '',
        pwdList: '', // 输入的支付密码
        pwdMsg: '', // 密码错误提示
        pwdMsgTit: '输入支付密码', // 顶部密码提示消息
        setPwdMsg: '', // 设置支付密码时候的提示消息，
        onePwd: '',
        twoPwd: '',
        showOneCard: false,
        //一卡通数据
        oneCardList: [],
        currentOneCard: '' //  当前选中的一卡通
      }
    },
    created() {
      this.amountTotal = this.$route.query.amountTotal //订单金额
      this.discountMoney = this.$route.query.amountTotal //折扣金额
      this.orderNo = this.$route.query.orderNo //订单编号
      this.id = this.$route.query.id //订单id
      this.cardTypeId = this.$route.query.cardTypeId || ''
      // 获取订单详情
      this.getOderDetail()

      // 获取会员卡列表
      this.cardList()

      // 判断订单是否支持一卡通
      this.getOneCard()
    },
    directives: {
      pwd: {
        inserted(el, binding, vnode) {
          console.log(binding)
          // var data = vnode.data.attrs["data-pwd"];
          // console.log(data);
          // if(data.text){
          //   el.innerHtml = data.text
          // }
        },
        updated(el, params, vnode) {
          console.log(params)
          // var data = vnode.data.attrs["data-pwd"];
          // console.log(data);
        }
      }
    },
    computed: {
      isShow() {
        if (this.orderType === '2' || this.orderType === '5') {
          return false
        }
        return true
      },
      isCourseCard() {
        if (this.orderType === '5') {
          return true
        }
        return false
      }
    },
    methods: {
      cancel() {
        this.dialog = false
        this.pwdList = ''
        this.payPwd = ''
        this.pwdMsg = ''
        this.pwdMsgTit = '输入支付密码'
        this.onePwd = ''
        this.twoPwd = ''
        this.setPwdMsg = ''
      },
      foo() {
        var _this = this
        if (this.payPwd.length <= 6) {
          this.pwdList = this.payPwd
        } else if (this.payPwd.length > 6) {
          this.payPwd = this.payPwd.substring(0, 6)
          this.pwdList = this.payPwd
        }
        console.log(this.pwdList, this.payPwd, '输入的支付密码')
      },
      setPwd(e) {
        var self = this
        if (!this.onePwd && !this.twoPwd && this.pwdList.length >= 6) {
          this.onePwd = this.pwdList
          this.setPwdMsg = '再次输入以确认'
          this.pwdList = ''
          this.payPwd = ''
          e.target.innerText = '确认'
          return
        } else {
          this.setPwdMsg = '支付密码不合格'
        }
        if (this.onePwd && !this.twoPwd && this.pwdList.length >= 6) {
          this.twoPwd = this.pwdList
          // 确认
        } else {
          this.setPwdMsg = '支付密码不合格'
        }

        if (this.onePwd && this.twoPwd && this.pwdList) {
          if (this.onePwd === this.twoPwd) {
            console.log('合格', this.onePwd, this.twoPwd)
            self._ajax({
              url: self.fn.wyl + 'member/setPaypwd',
              method: 'post',
              data: {
                payPwd: self.pwdList
              },
              callback(db) {
                if (db.errorCode == 200) {
                  self.cancel()
                  self.fn.tip('设置成功')
                } else {
                  self.pwdMsg = db.msg
                }
              }
            })
          } else {
            console.log('不合格', this.onePwd, this.twoPwd)
            //this.pwdMsg = "两次密码输入不一致，重新设置";
            this.setPwdMsg = '6位数字将用于会员卡支付'
            self.fn.tip('两次密码输入不一致，请重新设置。')
            this.onePwd = ''
            this.twoPwd = ''
            this.pwdList = ''
            this.payPwd = ''
          }
        }
      },
      ////http://amqq.ittun.com/facebook/a//wapApi/card/getOneCard
      getOneCard() {
        var url = this.fn.wyl + 'card/getOneCard'
        var _this = this
        this._ajax({
          url: url,
          method: 'post',
          data: {},
          callback(db) {
            _this.oneCardList = db.datas
            if (_this.oneCardList.length > 0) {
              _this.currentOneCard = _this.oneCardList[0]
            }
          }
        })
      },
      // 以上是1.0.8 版本代码
      // 获取订单详情 http://amxqq.ittun.com/facebook/a/wapApi/orders/ordersDetails
      getOderDetail() {
        var url = this.fn.wyl + 'orders/ordersDetails'
        var _this = this
        this._ajax({
          url: url,
          method: 'post',
          data: {
            id: this.id
          },
          callback(db) {
            var res = db.datas
            _this.amountTotal = res.amountTotal
            _this.discountMoney = res.amountTotal
            _this.orderType = res.type
            // 如果是会员卡  或者疗程 默认选中微信支付
            if (_this.orderType === '2' || _this.orderType === '5') {
              _this.weChatPaymentAmount()
            }
          }
        })
      },

      /**************无会员卡弹出框**************/
      // 查看门店
      suresW() {
        this.$router.push({
          path: '/beautySalon'
        })
      },
      // 关闭
      closeW() {
        this.dialogW = false
      },
      // 取消
      cancelsW() {
        this.dialogW = false
      },
      /***********余额不足弹出框***************/
      // 关闭弹框
      closeM() {
        this.dialogM = false
      },
      // 选择其他卡片
      suresM() {
        this.dialogM = false //关闭当前弹框
        this.displayOrHide = true //弹出会员卡选择弹框
      },
      // 去充值
      cancelsM() {
        this.dialogM = false //关闭当前弹框

        if (!this.cardItem.statusPay) {
          return this.fn.tip('此卡不支持充值，请选择其他卡片。')
        }
        this.$router.push({
          path: '/memberRecharge',
          query: {
            id: this.cardId
          }
        })
      },
      /***********未设会员卡支付密码弹出框***********/
      suresT() {
        this.dialogT = false
        this.$router.push({
          path: '/setPayPwd'
        })
      },
      // 关闭会员支付密码弹出框
      cancels() {
        this.payPwd = ''
        this.dialog = false
        this.dialogT = false
      },
      // 调后台支付接口
      sures() {
        console.log(this.payPwd)
        var _this = this
        // _this.dialog = false;
        var data = {
          orderNo: this.orderNo, //订单编号
          payType: _this.payType, //支付类型：1微信 2卡	3微信（优化） 4一卡通  6 一卡通支付
          cardId: _this.cardId, //卡id,payTpey选择2时必填参数
          callBackUrl:
            location.origin +
            location.pathname +
            (_this.isMemberCard != '2'
              ? '#/successPay?orderNo='
              : '#/SuccessPayBuyCard?orderNo=') +
            _this.orderNo +
            '&id=' +
            _this.id +
            '&cardTypeId=' +
            _this.cardTypeId, //支付成功或失败回调路径
          cancelUrl: location.origin + location.pathname + '#/orders?type=1', //取消支付回调路径（到待支付列表有页）
          cardPwd: _this.payPwd //支付密码
        }
        _this._ajax({
          url: _this.fn.wyl + 'pay/wapPay',
          method: 'post',
          data: data,
          callback(db) {
            // 清除会员卡支付密码
            _this.payPwd = ''

            // 会员卡支付 一卡通支付
            if (data.payType == 2 || data.payType == 6) {
              if (db.errorCode == 200) {
                _this.$router.push({
                  path: '/successPay',
                  query: {
                    orderNo: _this.orderNo,
                    id: _this.id
                  }
                })
              } else if (db.errorCode == 899) {
                /*
                      // 会员支付密码弹框
                            dialogTxt: {
                              btn: "",
                              okBtn: "",
                              cancelBtn: "",
                              msg: ""
                            },


                             setPwdMsg:"6位数字将用于会员卡支付"
                      */

                _this.pwdList = ''
                // _this.pwdMsg = db.msg;
                _this.pwdMsgTit = '设置支付密码'
                _this.payPwd = ''
                // _this.dialogTxt.okBtn = "下一步";
                _this.setPwdMsg = '6位数字将用于会员卡支付'
                //未设置会员卡支付密码
                // _this.dialogT = true;
              } else {
                // _this.fn.tip(db.msg, "12rem");
                _this.pwdMsg = db.msg
                _this.dialog = true
              }
            }

            // 微信支付
            if (data.payType == 1) {
              if (db.errorCode == 998) {
                //未授权
                location.href = db.datas
              } else if (db.errorCode == 200) {
                //调起微信支付
                _this.weChatData = db.datas
                _this.callpay()
              } else {
                _this.fn.tip(db.msg, '12rem')
              }
            }
            // 微信支付（优化）
            if (data.payType == 3) {
              if (db.errorCode == 200) {
                location.href = db.datas.payUrl
              } else {
                _this.fn.tip(db.msg, '12rem')
                _this.$router.push({
                  path: '/orders',
                  query: {
                    type: 1
                  }
                }) //支付失败跳转到订单待支付列表
              }
            }
          }
        })
      },
      // 获取会员卡信息
      cardList() {
        var _this = this
        _this._ajax({
          url: _this.fn.xqq + 'card/cardList',
          method: 'post',
          data: {},
          callback(db) {
            if (db.errorCode == 200) {
              _this.selectMemberCard = db.datas
              // 默认显示的会员卡
              if (_this.selectMemberCard.length != 0) {
                _this.defaultCard = _this.selectMemberCard[0]
                _this.cardId = _this.selectMemberCard[0].id
                _this.deductionMoney =
                  _this.selectMemberCard[0].cardType.deductionMoney
                _this.courseDeduction =
                  _this.selectMemberCard[0].cardType.courseDeduction
              }
            } else {
              _this.fn.tip(db.msg)
            }
          }
        })
      },
      // 打开会员选择弹窗
      openMemberCardDialog() {
        if (this.selectMemberCard.length == 0) {
          return
        }
        this.displayOrHide = true
      },
      // 选择会员卡
      selectCard(item, $event) {
        var _this = this
        _this.payType = 2
        _this.defaultCard = item
        _this.deductionMoney = item.cardType.deductionMoney
        _this.cardId = item.id
        _this.courseDeduction = item.cardType.courseDeduction
        if (item) {
          setTimeout(function() {
            _this.displayOrHide = false
          }, 200)
        }
        // 获取会员卡折后价
        _this.cardDiscountm(false)
      },
      // 选择一卡通
      selectOneCard(item) {
        var _this = this
        if (!item) {
          this.cardId = this.currentOneCard.cardId
          this.amountReduce = (
            this.amountTotal *
            (this.currentOneCard.discount / 10)
          ).toFixed(2) // 折扣金额
          //  console.log(this.amountReduce)
          this.discountMoney = this.amountTotal - this.amountReduce // 订单待支付金额
        } else {
          this.currentOneCard = item
          this.cardId = item.cardId
          this.amountReduce = (
            this.amountTotal *
            (this.currentOneCard.discount / 10)
          ).toFixed(2) // 折扣金额
          console.log(
            this.amountReduce,
            this.amountTotal,
            this.currentOneCard.discount / 10
          )
          this.discountMoney = this.amountTotal - this.amountReduce // 订单待支付金额
        }
        _this.payType = 6
        this.isMemberPayment = false
        this.isWeChatpayment = false
      },
      // 关闭会员卡选择
      closeSelectCard() {
        this.displayOrHide = false
      },
      // 去门店列表页
      gotoShopList() {
        this.$router.push({
          path: 'shopList'
        })
      },
      // 判断是否在微信中
      callpay() {
        var _this = this
        if (typeof WeixinJSBridge == 'undefined') {
          if (document.addEventListener) {
            document.addEventListener(
              'WeixinJSBridgeReady',
              _this.onBridgeReady,
              false
            )
          } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', _this.onBridgeReady)
            document.attachEvent('onWeixinJSBridgeReady', _this.onBridgeReady)
          }
        } else {
          _this.onBridgeReady()
        }
      },
      // 调用微信支付接口
      onBridgeReady() {
        var _this = this
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest',
          {
            appId: _this.weChatData.appId,
            timeStamp: _this.weChatData.timeStamp,
            nonceStr: _this.weChatData.nonceStr,
            package: _this.weChatData.package,
            signType: _this.weChatData.signType,
            paySign: _this.weChatData.paySign
          },
          function(res) {
            // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回  ok，但并不保证它绝对可靠。
            //alert(res.err_msg);
            if (res.err_msg == 'get_brand_wcpay_request:ok') {
              // alert("支付成功");
              _this.fn.tip('支付成功')
              _this.$router.push({
                path: 'successPay',
                query: {
                  orderNo: _this.orderNo,
                  id: _this.id
                }
              }) //到支付成功页
            }
            if (res.err_msg == 'get_brand_wcpay_request:cancel') {
              // alert("交易取消");
              _this.fn.tip('交易取消')
              _this.$router.push({
                path: 'orders',
                query: {
                  type: 1
                }
              }) //到订单页（待付款）
            }
            if (res.err_msg == 'get_brand_wcpay_request:fail') {
              // alert("支付失败");
              _this.fn.tip('支付失败')
              _this.$router.push({
                path: 'orders',
                query: {
                  type: 1
                }
              }) //到订单页（待付款）
            }
          }
        )
      },
      // 点击确认支付
      confirmPayment() {
        var _this = this
        if (_this.payType == '') {
          _this.fn.tip('请选择支付方式！')
          return
        }
        if (_this.payType == 2 && _this.selectMemberCard.length == 0) {
          _this.dialogW = true
          // _this.fn.tip("您还没有会员卡，请选择其他支付方式！", "15rem");
          return
        }
        if (_this.payType == 2 && _this.selectMemberCard.length > 0) {
          //会员卡支付
          _this.cardDiscountm(true)
        }
        if (_this.payType == 1) {
          //微信支付
          _this.sures()
        }
        if (_this.payType == 3) {
          //微信支付
          _this.sures()
        }
        if (_this.payType == 6) {
          //一卡通支付
          _this.oneCardPay()
        }
      },
      oneCardPay() {
        this.dialog = true
      },
      // 获取折扣金额
      cardDiscountm(isGotoPayment) {
        this.cardId = this.defaultCard.id || ''
        var _this = this
        _this.payType = 2 //会员卡支付
        _this.isWeChatpayment = false
        _this.isMemberPayment = true
        if (_this.cardId == '') {
          _this.dialogW = true
          return
          // _this.fn.tip("您还没有会员卡")
        }

        _this._ajax({
          url: _this.fn.xqq + 'orders/cardDiscountm',
          method: 'post',
          data: {
            orderNo: _this.orderNo, //订单id
            cardId: _this.cardId //卡id
          },
          callback(db) {
            if (db.errorCode == 200) {
              _this.cardItem = db.datas
              //  如果为设置支付密码提示设置支付密码
              if (!_this.cardItem.paypwd) {
                _this.pwdList = ''
                _this.pwdMsg = ''
                _this.pwdMsgTit = '设置支付密码'
                _this.payPwd = ''
                // _this.dialogTxt.okBtn = "下一步";
                _this.setPwdMsg = '6位数字将用于会员卡支付'
              }
              if (_this.payType == 2) {
                _this.discountMoney = db.datas.discountMoney
              } else {
                _this.discountMoney = _this.amountTotal
              }

              _this.amountReduce = db.datas.amountReduce //优惠额度

              if (db.datas.ispay) {
                //会员卡可支付
                if (isGotoPayment) {
                  _this.dialog = true
                }
              } else {
                //余额不足
                _this.dialogTxtM.msg =
                  '您当前的' +
                  (db.datas.cardName || '会员卡') +
                  "可用余额为：<span style='color:#f25d5d;'>" +
                  db.datas.cardMoney +
                  '</span>元,' +
                  "折扣后需支付<span style='color:#f25d5d;'>" +
                  _this.discountMoney +
                  '</span>元，现余额不足！'
                _this.dialogM = true
              }
            } else {
              _this.fn.tip(db.msg)
            }
          }
        })
      },
      // 微信支付金额
      weChatPaymentAmount() {
        this.payType = 3 //微信支付
        this.isMemberPayment = false
        this.isWeChatpayment = true
        this.discountMoney = this.amountTotal
        this.amountReduce = 0
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../assets/css/common.scss";
  @import "../../assets/css/util.scss";
  .footerIponeX {
    bottom: 1.6rem !important;
  }

  .IponeX {
    width: 100%;
    height: 1.6rem;
    background-color: #fff;
    position: fixed;
    bottom: 0;
  }

  .payment .payPassWord {
    border: 0.2rem;
    font-size: 0.8rem;
  }

  .payment .payPassWord input {
    margin-left: 0.4rem;
    border-radius: 0.2rem;
    height: 1.5rem;
    /*color:transparent;
            text-shadow:0 0 0 black;*/
  }

  .dialog {
    position: static !important;
  }

  .payment {
    /*position: fixed;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;*/
    background: $theme-background-gray;
  }

  .payment header {
    height: 2rem;
    line-height: 2rem;
    background-color: $theme-blue;
    font-family: PingFangSC;
    font-size: 0.6rem;
    font-weight: 7.5rem;
    letter-spacing: 0.03rem;
    color: #ffffff;
  }

  .payment .orderAmount {
    display: flex;
    justify-content: space-between;
    height: 3rem;
    line-height: 3rem;
    background-color: #ffffff;
    padding-left: 0.725rem;
    padding-right: 0.725rem;
    font-family: PingFangSC;
    font-size: 0.75rem;
    font-weight: 7.5rem;
    letter-spacing: 0.03rem;
    color: $price-color;
  }

  .payment .orderAmount div:first-child {
    color: #333333;
  }

  .payment .paymentMethods {
    background-color: rgba(0, 0, 0, 0);
  }

  .payment .paymentMethods .dialog .weChat {
    position: relative;
  }

  .payment .paymentMethods .dialog .weChat span {
    position: absolute;
    right: 0px;
    top: 1rem;
  }

  .payment .paymentMethods .dialog .weChat label span {
    position: absolute;
    left: 6.5rem;
  }

  .payment .paymentMethods .dialog .weChat label span {
    position: static;
  }

  .payment .paymentMethods .dialog .weChat input[type="radio"]:checked + span {
    background-image: url("../../assets/image/beautySalon/payment1 (3).png");
    background-size: contain;
    border: none;
  }

  .payment .paymentMethods .paymentMethodsTitle {
    text-align: left;
    height: 3rem;
    line-height: 3rem;
    padding-left: 0.725rem;
    font-family: PingFangSC;
    font-size: 0.6rem;
    font-weight: 300;
    letter-spacing: 0.03rem;
    color: #999999;
  }

  .payment .paymentMethods .partingline {
    padding-left: 0.75rem;
    /*background: white;*/
    border: 0.4rem solid #f0f0f0;
  }

  /*.payment .paymentMethods .partingline div{
            height:0.025rem;
            border:none;
            border-top:0.025rem solid #e6e6e6;
        }*/

  .payment .paymentMethods .weChat,
  .paymentMethods .member {
    text-align: left;
    height: 3rem;
    /*line-height: 3rem;*/
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    background: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .payment .paymentMethods.layer .weChat,
  .paymentMethods.layer .member {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0.75rem;
    margin-right: 0.75rem;
  }

  .paymentMethods .member {
    border-bottom: 0.025rem solid #e6e6e6;
  }

  .payment .paymentMethods .weChat img,
  .paymentMethods .member img {
    width: 0.9rem;
    height: 0.825rem;
  }

  .payment .paymentMethods .weChat label,
  .paymentMethods .member label {
    flex: 1;
    margin-left: 0.8rem;
  }

  .payment .paymentMethods .weChat.card label {
    height: 100%; // background-color: #cccccc;
    > div {
      height: 100%;
      > div {
        height: 50%;
        display: flex;
        align-items: center;
      }
    }
  }

  .paymentMethods .member label div:first-child .recommend {
    display: inline-block;
    border: 2px solid #08bae3;
    border-radius: 4px;
    position: relative;
    top: -0.3rem;
    color: #08bae3;
    padding: 0 5px;
    font-size: 12px;
    height: 20px;
    width: 38px;
  }

  .paymentMethods .member label div:last-child {
    font-size: 0.5rem;
  }

  .payment .paymentMethods .weChat .hidden-input,
  .paymentMethods .member .hidden-input {
    opacity: 0;
    position: relative;
    left: 1rem;
    z-index: 10;
  }

  .payment .paymentMethods .weChat .hidden-input {
    display: none;
  }

  .payment .weChat input[type="radio"] + span {
    display: inline-block;
    height: 1rem;
    width: 1rem;
    border-radius: 1rem;
    /*border: 0.025rem solid gray;*/
  }

  .payment .paymentMethods .weChat .selectedCard {
    background-image: url("../../assets/image/beautySalon/payment1 (3).png");
    background-size: contain;
    border: none;
  }

  .payment .weChat .isMemberPayment {
    background-image: url("../../assets/image/beautySalon/payment1 (3).png");
    background-size: contain;
    border: none;
  }

  .payment .member input[type="radio"] + span {
    display: inline-block;
    height: 1rem;
    width: 1rem;
    border-radius: 1rem;
    /*border: 0.025rem solid gray;*/
  }

  .payment .addBorder {
    border: 0.025rem solid gray;
    pointer-events: none;
  }

  .payment .member .isMemberPayment,
  .payment .weChat .isWeChatpayment {
    background-image: url("../../assets/image/beautySalon/payment1 (3).png");
    background-size: contain;
    border: none;
  }

  .payment .memberCardType {
    display: flex;
    justify-content: space-between;
    height: 2.5rem;
    line-height: 2.5rem;
    background: white;
    padding-left: 2.425rem;
    padding-right: 0.75rem;
    font-family: PingFangSC;
    font-size: 0.6rem;
    font-weight: 7.5rem;
    letter-spacing: 0.03rem;
    color: #666666;
  }

  .payment .memberCardType span {
    font-family: PingFangSC;
    font-size: 0.5rem;
    font-weight: 7.5rem;
    letter-spacing: 0.025rem;
    color: #999999;
  }

  .payment .memberCardType i {
    margin-bottom: 0.1rem;
    margin-left: 0.2rem;
  }

  .payment footer {
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 2.45rem;
    line-height: 2.45rem;
    background: #ffffff;
    display: flex;
  }

  .payment footer div {
    flex: 1;
  }

  .payment footer div:first-child {
    background: #ffffff;
    flex: 0 0 70.93333333333334%;
  }

  .payment footer .confirmPayment {
    background-color: $theme-blue;
    font-family: PingFangSC;
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffffff;
  }

  .payment footer .paymentContent {
    text-align: left;
    padding-left: 0.5rem;
    font-family: PingFangSC;
    font-size: 0.7rem;
    font-weight: 500;
    color: #333333;
    width: 72%;
  }

  .payment footer .paymentContent .paymentSymbol {
    color: $price-color;
    font-weight: $font-weight;
  }

  .payment footer .paymentContent .paymentMoney {
    color: $price-color;
    font-weight: 800;
    padding-right: 0.3rem;
  }

  .payment footer .paymentContent .paymentPreferential {
    color: #999999;
    border-left: 1px solid #999999;
    padding-left: 0.6rem;
  }

  /*弹出框部分*/

  .payment .layer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .payment .layer .dialog {
    background: white;
    width: 15rem;
    border-radius: 0.25rem;
  }

  .payment .layer .dialog h4 {
    height: 2rem;
    line-height: 2rem;
    text-align: left;
    border-bottom: 0.025rem solid #c0c0c0;
    margin-left: 0.75rem;
    margin-right: 0.75rem;
  }

  //color:transparent;
  .payment .layer .dialog h4 i {
    /*text-align: right;*/
    float: right;
    display: inline-block;
    color: #999;
    font-size: 1.2rem;
    width: 1.5rem;
    height: 2rem;
    background: url(../../assets/image/icon/close.png) no-repeat center center;
    background-size: 40%;
    margin-right: -0.4rem;
    margin-top: -0.1rem;
  }

  .payment .layer .weChat {
    // height: 2rem;
    border-bottom: 0.025rem solid #c0c0c0;
    margin-bottom: 0;
  }

  .payment .layer .dialog img {
    height: 1.5rem;
    width: 2rem;
  }

  .payment .hide {
    display: none;
  }

  /*页面禁止点击*/

  .eventDisable {
    pointer-events: none;
  }

  /*页面可点击*/

  .eventAble {
    pointer-events: auto;
  }

  .showPwd {
    border: 1px solid #999;
    position: relative;
    width: 12rem;
    .SPAN {
      display: flex;
      width: 12rem;
      height: 2rem;
      span {
        flex: 1;
        border-right: 1px solid #ccc;
        &:last-of-type {
          border: none;
        }
      }
    }
    .I {
      position: absolute;
      top: 0;
      left: 0;
      width: 12rem;
      height: 2rem;
      display: flex;
      i {
        width: 0.5rem;
        height: 0.5rem;
        display: inline-block;
        background-color: #000;
        border-radius: 50%;
        margin: 0.75rem;
      }
    }
    .newinput {
      -webkit-appearance: none;
      color: #fff;
      color: transparent;
      border: none;
      position: absolute;
      top: 0;
      left: -0.4rem;
      width: 11.5rem;
      height: 2rem !important;
      border: none !important;
      background-color: none;
      z-index: 100;
      opacity: 0;
    }
  }

  .payPassWord {
    h5 {
      font-size: 0.9rem;
      color: #333333;
      padding-bottom: 1rem;
    }
  }

  .msg {
    width: 12rem; // height: 2rem;
    // line-height: 2rem;
    display: flex;
    justify-content: space-between;
    font-size: 0.6rem;
    span:nth-of-type(1) {
      color: #ea4c4c;
    }
    span:nth-of-type(2) {
      color: #666666;
    }
  }

  .setPwdMsg {
    color: #666666;
    font-size: 0.6rem;
    padding: 0.5rem 0;
  }

  .newdialog {
    .mask {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: rgba(0, 0, 0, 0.2);
      z-index: 9;
    }
    .content {
      position: absolute;
      width: 74.66666666666667%;
      background: #fff;
      border-radius: 0.4rem;
      margin-left: -7rem;
      left: 50%;
      top: 50%;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      z-index: 99;
      ._content {
        padding: 1rem;
        padding-bottom: 0;
        line-height: 1rem;
        font-size: 0.8rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        h5 {
          font-size: 0.9rem;
          line-height: 0.9rem;
          color: #333333; // padding-bottom: 1.4rem;
          font-weight: normal;
        }
        .setPwdMsg {
          color: #666666;
          font-size: 0.6rem;
          line-height: 0.6rem;
          padding-top: 0.6rem;
          padding-bottom: 1rem;
        }
        .showPwd {
          border: 1px solid #999;
          position: relative;
          width: 12rem;
          .SPAN {
            display: flex;
            width: 12rem;
            height: 2rem;
            span {
              flex: 1;
              border-right: 1px solid #ccc;
              &:last-of-type {
                border: none;
              }
            }
          }
          .I {
            position: absolute;
            top: 0;
            left: 0;
            width: 12rem;
            height: 2rem;
            display: flex;
            i {
              width: 0.5rem;
              height: 0.5rem;
              display: inline-block;
              background-color: #000;
              border-radius: 50%;
              margin: 0.75rem;
            }
          }
          .newinput {
            -webkit-appearance: none;
            color: #fff;
            color: transparent;
            border: none;
            position: absolute;
            text-indent: -999em;
            top: 0;
            left: 0rem;
            width: 12rem;
            margin-left: -100%;
            width: 200%;
            height: 2rem !important;
            border: none !important;
            background-color: none;
            z-index: 100;
            opacity: 0;
          }
        }
        .msg {
          width: 12rem;
          font-size: 0.6rem;
          padding: 0.5rem 0;
          > div {
            display: flex;
            justify-content: space-between; // height: 1rem;
            width: 100%;
            span {
              flex: 1;
              height: 100%;
            }
            span:nth-of-type(1) {
              color: #ea4c4c;
              text-align: left;
            }
            span:nth-of-type(2) {
              color: #666666;
              text-align: right;
            }
          }
        }
      }
      .btn {
        border-radius: 0 0 0.4rem 0.4rem;
        overflow: hidden;
        display: flex;
        border-top: 1px solid #e7e7e7;
        span {
          width: 50%;
          line-height: 2rem;
          letter-spacing: 1px;
          font-size: 0.75rem;
          background: #fff;
          color: #999;
          border-right: 1px solid #e7e7e7;
          &:nth-of-type(2) {
            color: #11abcf;
          }
        }
      }
    }
  }

  .paymentMethods {
    .oneCard {
      margin-top: px2rem(30);
      background-color: #ffffff;
      > div:nth-of-type(1) > label {
        height: px2rem(120);
        padding: 0 px2rem(30);
        display: flex;
        justify-content: space-between;
        align-items: center;
        > span:nth-of-type(1) {
          display: inline-flex;
          align-items: center;
          position: relative;
          > i:nth-of-type(1) {
            display: inline-block;
            @include wh(36,
                  34);
            background-image: url("~@/assets/image/oneCard.png");
            background-size: 100%;
            margin-right: px2rem(30);
          }
          > i:nth-of-type(2) {
            position: absolute;
            display: inline-block;
            right: px2rem(-80);
            top: px2rem(-15);
            @include wh(76,
                  26);
            background-image: url("~@/assets/image/aimei.png");
            background-size: 100%;
          }
        }
        > span:nth-of-type(2) {
          input[type="radio"] {
            display: inline-block;
            width: px2rem(40);
            height: px2rem(40);
            border-radius: 50%;
            border: 0.025rem solid gray;
            background-color: #ffffff;
          }
          input[type="radio"]:checked {
            background-image: url("../../assets/image/beautySalon/payment1 (3).png");
            background-size: contain;
            border: none;
          }
        }
      }
      > div:nth-of-type(2) {
        height: px2rem(88);
        border-top: 0.025rem solid #e6e6e6;
        padding: 0 px2rem(30);
        display: flex;
        align-items: center;
        justify-content: space-between; // span{
        // }
      }
    }
  }
  .oneCardMsk {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    > .oneCardList {
      background-color: #fff;
      width: 15rem;
      > div:nth-of-type(1) {
        height: px2rem(100);
        margin-left: 0.75rem;
        margin-right: 0.75rem;
        border-bottom: 0.025rem solid #c0c0c0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        span:nth-of-type(1) {
          font-weight: bold;
        }
        span:nth-of-type(2) {
          display: inline-block;
          color: #999;
          font-size: 1.2rem;
          width: 1.5rem;
          height: 2rem;
          background: url(../../assets/image/icon/close.png) no-repeat center
            center;
          background-size: 50%;
        }
      }
      > ul {
        max-height: 12rem;
        overflow: scroll;
        > li {
          height: px2rem(120);
          margin-left: 0.75rem;
          margin-right: 0.75rem;
          border-bottom: 0.025rem solid #c0c0c0;
          label {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            > div:nth-of-type(1) {
              display: flex;
              align-items: center;
              > span {
                display: inline-block;
                @include wh(32,32);
                background-color: #000;
                margin-right: 1rem;
              }
              > div:nth-of-type(1) {
                display: flex;
                flex-direction: column;
                span {
                  text-align: left;
                  &:nth-of-type(1) {
                    font-size: px2rem(26);
                    color: #333333;
                  }
                  &:nth-of-type(2) {
                    font-size: px2rem(20);
                    color: #999999;
                  }
                }
              }
            }
            > div:nth-of-type(2) {
              input {
                @include wh(40,40);
                border-radius: 50%;
                border: 1px solid gray;
              }
              input[type="radio"]:checked {
                background-image: url("../../assets/image/beautySalon/payment1 (3).png");
                background-size: contain;
                border: none;
              }
            }
          }
        }
      }
    }
  }
</style>
